<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锤子商城 - 坚果手机、坚果 Pro 3 手机、坚果 R1 手机</title>
    <link rel="icon" href="/images/favicon.ico">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/lib/swiper/css/swiper.min.css">
</head>
<body>
    <!-- 页面头部容器 结构复用 -->
    <div class="headerBox"></div>

    <!-- 页面导航栏容器 结构复用 -->
    <div class="navBox"></div>

    <!-- 页面主要内容区 -->
    <div class="container">
        <!-- 页面轮播图 结构复用 -->
        <div class="bannerBox card-box"></div>

        <!-- 活动区 -->
        <div id="activitiesTemplateBox"></div>
        <!-- 活动区模版 -->
        <script type="text/html" id="activitiesTemplate">
            <div class="activities card-box">
                <div class="card-box-content">
                    {{each data item}}
                    <li class="card-content-list">
                        <div class="card-list-imgBox">
                            <img src="{{item.image}}" alt="">
                        </div>
                        <a href="#" class="card-list-cover" target="_blank"></a>
                    </li>
                    {{/each}}
                </div>
            </div>
        </script>


        <!-- 热销区 -->
        <div id="hottestTemplateBox"></div>
        <!-- 热销区模版 -->
        <script type="text/html" id="hottestTemplate">
            <div class="hottest card-box">
                <div class="card-box-header">
                    <div class="card-header-title">
                        <h3>热门商品</h3>
                    </div>
                    <div class="card-header-more">
                        <i class="left">&lt;</i>
                        <i class="right active">&gt;</i>
                    </div>
                </div>
                <div class="card-box-content">
                    {{each data item}}
                    <li class="card-content-list">
                        <div class="card-list-imgBox">
                            <img src="{{item.spu.sku_info[0].ali_image}}" alt="">
                        </div>
                        <div class="card-list-msgBox">
                            <h4>{{item.spu.sku_info[0].title}}</h4>
                            <h5>{{item.spu.sku_info[0].sub_title}}</h5>
                        </div>
                        <div class="card-list-priceBox">
                            <span>¥{{item.spu.sku_info[0].price}}</span>
                        </div>
                        <a href="/html/item.html?id={{item.sku_id}}" class="card-list-cover" target="_blank"></a>
                    </li>
                    {{/each}}
                </div>
            </div>
        </script>


        <!-- 产品区 -->
        <div id="floorsTemplateBox"></div>
        <!-- 产品区m模版 -->
        <script type="text/html" id="floorsTemplate">
            {{each data item}}
            <div class="floors card-box">
                <div class="card-box-header">
                    <div class="card-header-title">
                        <h3>{{item.title}}</h3>
                    </div>
                </div>
                <div class="card-box-content">
                    {{each item.tabs[0].tab_items value, index}}
                        {{if index==0}}
                        <div class="card-content-firstList">
                            <img src="{{value.image}}" alt="">
                            <a href="#"></a>
                        </div>
                        {{else}}
                        {{set SKU_ID = value.sku_id}}
                            <div class="card-content-list">
                                {{each value.spu.sku_info item2}}
                                    {{if item2.sku_id == SKU_ID}}

                                        <div class="card-list-imgBox">
                                            <img src="{{item2.ali_image}}" alt="">
                                        </div>
                                        <div class="card-list-msgBox">
                                            <h4>{{item2.title}}</h4>
                                            <h5>{{item2.sub_title}}</h5>
                                        </div>
                                        <div class="card-list-priceBox">
                                            <span>¥{{item2.price}}</span>
                                        </div>
                                        <a href="/html/item.html?id={{SKU_ID}}" class="card-list-cover" target="_blank"></a>

                                    {{/if}}
                                {{/each}}
                            </div>
                        {{/if}}
                    {{/each}}
                </div>
            </div>
            {{/each}}
        </script>

        <!-- 论坛区 -->
        <div id="forumTemplateBox"></div>
        <!-- 论坛区模版 -->
        <script type="text/html" id="forumTemplate">
            <div class="forum card-box">
                <div class="card-box-header">
                    <div class="card-header-title">
                        <h3>论坛精选</h3>
                    </div>
                    <div class="card-header-more">

                    </div>
                </div>
                <div class="card-box-content">
                    {{each data item}}
                        <div class="card-content-list">
                            <div class="imgBox">
                                <img src="{{item.image}}" alt="">
                            </div>
                            <h4>{{item.title}}</h4>
                            <p>{{item.subtitle}}</p>
                            <a href="#">阅读全文 ></a>
                        </div>
                    {{/each}}
                </div>
            </div>
        </script>
    </div>

    <!-- 页面底部容器 结构复用 -->
    <div class="footerBox"></div>

    <!-- 项目说明 -->
    <div id="projectBtn">项目说明</div>
    <div id="projectMsg">
        <div class="msg">
            <h6>Smartisan前端练习项目</h6>
            <p>作者：<i>zhudeshuai0606@163.com</i></p>
            <p>项目说明：<a href="https://gitee.com/zhudeshuai0606/smartisan.git" target="_blank">https://gitee.com/zhudeshuai0606/smartisan.git</a></p>
            <div class="btnBox">
                <div class="returnBtn btn">返回首页</div>
                <div class="returnStationBtn btn">返回个人网站主页</div>
                <div class="clearBtn btn">清除缓存</div>
            </div>
        </div>
    </div>

</body>
    <!-- 首页模块搭载 -->
    <script src="/lib/require/require.min.js" data-main="/js/index.js"></script>
</html>